<template>
	<uni-popup type="bottom" ref="updatePhone">
		<view class="updatePhone">
			<div class="header">
				<img @click="close" src="../static/close.svg" class="close-icon" alt="" srcset="">
				<text class="header-title">绑定手机</text>
			</div>
			<view class="body">

				<input type="tel" maxlength="11" placeholder=" 请填写手机号" v-model="formData.mobile"
					class="user-name-input" />

				<view class="user-code">
					<input type="number" maxlength="4" placeholder="请填写验证码" v-model="formData.code"
						class="user-name-input" />
					<view class="sms-btn" @tap="showVerify" :disabled="codeDisabled">{{codeTips}}</view>

					<u-code ref="uCode" @change="codeChange" seconds="60" @start="codeDisabled = true"
						@end="codeDisabled = false"></u-code>
				</view>
				<view class="contact-btn" @click="bindPhone">绑定手机</view>
			</view>

		</view>
	</uni-popup>
</template>

<script>
	import {
		bindMobile
	} from "../api/user.js"
	import {
		sendSmsCode
	} from "../api/auth.js"
	export default {
		name: "UpdatePhonePopup",
		data() {
			return {
				codeDisabled: false,
				codeTips: '',
				formData: {
					mobile: '',
					password: '',
					code: ''
				},
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo
			},

		},
		methods: {
			open() {
				this.$refs.updatePhone.open()
			},
			close() {
				this.$refs.updatePhone.close()
			},
			codeChange(text) {
				this.codeTips = text
			},
			showVerify() {
				const mobile = this.formData.mobile
				if (!mobile) {
					uni.$u.toast('请填写手机号')
				} else if (!uni.$u.test.mobile(mobile)) {
					uni.$u.toast('手机号格式不正确')
				} else if (this.$refs.uCode.canGetCode) {
					this.$emit("showVerify")
				} else {
					uni.$u.toast('倒计时结束后再发送')
				}
			},
			getCode(captchaParams) {
				const mobile = this.formData.mobile

				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})

				//scene:1登陆获取验证码场景
				sendSmsCode({
					mobile: mobile,
					scene: 4,
					captchaVerification: captchaParams.captchaVerification

				}).then(res => {
					//console.log(res)
					uni.hideLoading()
					uni.$u.toast('验证码已发送')
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start()
				})

			},
			bindPhone() {
				const mobile = this.formData.mobile
				if (!mobile) {
					uni.$u.toast('请填写手机号')
					return
				}
				if (!uni.$u.test.mobile(mobile)) {
					uni.$u.toast('手机号格式不正确')
					return
				}
				if (!this.formData.code) {
					uni.$u.toast('请填写验证码')
					return
				}
				bindMobile(this.formData).then(result => {
					this.userInfo.mobile = mobile
					this.$store.commit('SET_USER_INFO', this.userInfo)
					this.close()
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.updatePhone::after {
		display: table;
		content: "";
		clear: both;
	}

	.updatePhone {
		background-color: white;
		border-top-left-radius: 30upx;
		border-top-right-radius: 30upx;
		padding-top: 24upx;
		height: 500upx;

		.header {
			height: 80upx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;


			.header-title {
				font-size: 30upx;
				font-weight: bolder;
			}

			.close-icon {
				width: 40upx;
				height: 40upx;
				position: absolute;
				left: 24upx;
				top: 20upx;
			}

		}

		.body {
			padding-left: 24upx;
			padding-right: 24upx;
			margin-bottom: 20upx;
			padding-top: 20upx;
			background-color: #f2f7ff;

			.user-name-input {
				background-color: #fff;
				border-radius: 12upx;
				box-shadow: 0 5upx 10upx 0 rgba(0, 0, 0, .05);
				font-size: 30upx;

				height: 80upx;

				padding-left: 24upx;
				padding-right: 24upx;

			}

			.user-code {
				display: flex;
				align-items: center;
			}

			.sms-btn {
				width: 300upx;
				font-size: 25upx;
				height: 80upx;

				margin: 40upx auto;
				margin-left: 24upx;
				background-color: $uni-color-primary;
				color: white;
				border-radius: 8upx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}



		.contact-btn {
			font-size: 34upx;
			height: 80upx;
			line-height: 80upx;
			margin: 40upx auto;
			width: 96%;
			background-color: $uni-color-primary;
			color: white;
			border-radius: 8upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>